<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博客</title>
    <link rel="stylesheet" href="/public/css/main.css">
    <script src="/public/js/jquery-3.1.0.js"></script>
    <script src="/public/js/jquery.easyfader.min.js"></script>
    <script src="/public/js/index.js"></script>
</head>
<body>
    <header>
        <div class="backimg"></div>
        <div class="banner">
            <div id="sucaihuo" class="fader"> <img class="slide" src="/public/image/banner01.jpg"> <img class="slide" src="/public/image/banner02.jpg"> <img class="slide" src="/public/image/banner03.jpg">
              <div class="fader_controls">
                <div class="page prev" data-target="prev">&lsaquo;</div>
                <div class="page next" data-target="next">&rsaquo;</div>
                <ul class="pager_list">
                </ul>
              </div>
            </div>
            <script>
                $(function() {
                    $('#sucaihuo').easyFader();
                });
            </script> 
        </div>
        <!-- <div class="logo"><span></span><img src="" alt=""></div> -->
    </header>
    <nav class="index_nav">
        <div class="menu">
            {% if category == '' %}
                <a href="/" class="focus">首页</a>
            {% else %}
                <a href="/">首页</a>
            {% endif %}

            {% for cate in categories %}
                {% if category == cate.id %}
                    <a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a>
                {% else %}
                    <a href="/?category={{cate.id}}">{{cate.name}}</a>
                {% endif %}
            
            {% endfor %}
        </div>
    </nav>
    <main class="blog-main">   
        
        <div class="mainLeft">
            {% block content %}
            {% endblock %}
        </div>


        <div class="mainRight">

            {% if userInfo._id %}

            <div class="rightBox" id="userInfo">
                <div class="title"><span>用户信息</span></div>
                <p><span class="colDark username">{{userInfo.username}}</span></p>
                
                {% if userInfo.isAdmin %}
                <p>
                    <span class="colDark info">你好，管理员！</span>
                    <a href="/admin">进入管理</a>
                </p>
                {% else %}
                <p><span class="colDark info">你好，欢迎光临我的博客！</span></p>
                {% endif %}

                <p><span class="colDark colWarning"></span></p>
                
                <p><span class="colDark"><a href="javascript:;" id="logoutBtn">退出</a></span></p>
            </div>
            {% else %}
            <div class="rightBox" id="loginBox">
                <div class="title"><span>登录</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text"/><em></em></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password"/><em></em></div>
                <div class="line"><span class="colDrak"></span><button>登录</button></div>
                <p class="textRight">还没注册？<a href="javascript:;" class="colMint">马上注册</a></p>
                <p class="colWarning textCenter"></p>
            </div>
            <div class="rightBox" id="registerBox" style="display:none;">
                <div class="title"><span>注册</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text"/><em></em></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password"/><em></em></div>
                <div class="line"><span class="colDark">确认：</span><input name="repassword" type="password"/><em></em></div>
                <div class="line"><span class="colDrak"></span><button>注册</button></div>
                <p class="textRight">已有账号？<a href="javascript:;" class="colMint">马上登录</a></p>
                <p class="colWarning textCenter"></p>
            </div>
            {% endif %}
        </div>
    </main>
</body>
</html>